<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、跨域是什么</h2>
  <div>跨域本质是浏览器基于同源策略的一种安全手段,同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能</div>
  <br>
  <div>非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域</div>
  <h2>二、如何解决</h2>
  <div>解决跨域的方法有很多，下面列举了三种</div>
  <ul>
    <li>JSONP</li>
    <li>CORS</li>
    <li>Proxy</li>
  </ul>
  <h3>CORS</h3>
  <div>只需要增加一些 HTTP 头，让服务器能声明允许的访问来源,只要后端实现了 CORS，就实现了跨域</div>
  <h3>Proxy</h3>
  <div>代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止攻击</div>
  <h4>方案一</h4>
  <div>如果是通过vue-cli脚手架工具搭建项目，我们可以通过webpack为我们起一个本地服务器作为请求的代理对象

    通过该服务器转发请求至目标服务器，得到结果再转发给前端，但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域</div>
    <script>
      // 在vue.config.js文件，新增以下代码
      // amodule.exports = {
      //     devServer: {
      //         host: '127.0.0.1',
      //         port: 8084,
      //         open: true,// vue项目启动时自动打开浏览器
      //         proxy: {
      //             '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
      //                 target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
      //                 changeOrigin: true, //是否跨域
      //                 pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
      //                     '^/api': "" 
      //                 }
      //             }
      //         }
      //     }
      // }

      // 通过axios发送请求中，配置请求的根路径
      // axios.defaults.baseURL = '/api'
    </script>
    <h4>方案二</h4>
</body>
</html>